<template>
  <view>
    <uni-card class="list" @click="toEnterprise()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/qyks.png"
          class="listIcons1"
        ></image>
        <view class="listText1">矿山企业</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.enterpriseInfoCount }}</view>
          <view class="listText3">家</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toRecord()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/sxjjl.png"
          class="listIcons1"
        ></image>
        <view class="listText1">升下井记录</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.upholeDownholeNum }}</view>
          <view class="listText3">次</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toDuty()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/zrq.png"
          class="listIcons1"
        ></image>
        <view class="listText1">责任区</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.zoneNum }}</view>
          <view class="listText3">个</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toEquipment()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/sbjr.png"
          class="listIcons1"
        ></image>
        <view class="listText1">设备接入</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.deviceNum }}</view>
          <view class="listText3">个</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toWarning()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/gjzs.png"
          class="listIcons1"
        ></image>
        <view class="listText1">告警总数</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.warningMessageNum }}</view>
          <view class="listText3">条</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toDanger()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/yhzs.png"
          class="listIcons1"
        ></image>
        <view class="listText1">隐患总数</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.hiddenCount }}</view>
          <view class="listText3">条</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>

    <uni-card class="list" @click="toAccident()">
      <view class="listItem">
        <view class="leftTop"></view>
        <image
          src="../../static/images/fenxi/sgzs.png"
          class="listIcons1"
        ></image>
        <view class="listText1">事故总数</view>
        <view class="bg">
          <view class="listText2">{{ sysListData.accidentNum}}</view>
          <view class="listText3">起</view>
          <uni-icons
            class="icon-gengduo_"
            custom-prefix="iconfont"
            color="#225EA4"
            size="12"
          ></uni-icons>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import { analyseList } from "@/api/analyse.js";
export default {
  data() {
    return {
      sysListData: {},
    };
  },
  mounted() {
    this.getAnalyseList();
  },
  methods: {
    toEnterprise() {
      this.$tab.navigateTo("/pages/analyse/enterprise/index");
    },
    toRecord() {
      this.$tab.navigateTo("/pages/analyse/record/index");
    },
    toDuty() {
      this.$tab.navigateTo("/pages/analyse/duty/index");
    },
    toEquipment() {
      this.$tab.navigateTo("/pages/analyse/equipment/index");
    },
    toWarning() {
      this.$tab.navigateTo("/pages/analyse/warning/index");
    },
    toDanger() {
      this.$tab.navigateTo("/pages/analyse/danger/index");
    },
    toAccident() {
      this.$tab.navigateTo("/pages/analyse/accident/index");
    },
    // 综合统计数据
    getAnalyseList() {
      analyseList()
        .then((result) => {
          this.sysListData = result.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.list {
  height: 150rpx;
  border-right: 10rpx solid #1e579a;
  background-color: #fcfcfc;
}
.listItem {
  line-height: 80rpx;
  position: relative;
}
.leftTop {
  width: 0;
  height: 0;
  border-top: 50rpx solid #f9f9f9;
  border-right: 50rpx solid transparent;
  margin-left: -42rpx;
  margin-top: -26rpx;
}
.listIcons1 {
  float: left;
  width: 88rpx;
  height: 88rpx;
  margin-top: -20rpx;
  margin-right: 28rpx;
}
.listText1 {
  float: left;
  color: #343434;
  font-size: 36rpx;
  margin-top: -15rpx;
}
.bg {
  background-color: #f9f9f9;
  width: 180rpx;
  height: 160rpx;
  float: right;
  margin-top: -46rpx;
  margin-right: -40rpx;
}
.listText2 {
  position: absolute;
  right: 65rpx;
  color: #1e61a5;
  font-size: 42rpx;
  font-weight: 700;
  font-style: italic;
  line-height: 150rpx;
}
.listText3 {
  position: absolute;
  left: 555rpx;
  color: #547b96;
  font-size: 24rpx;
  line-height: 160rpx;
}
.icon-gengduo_ {
  float: right;
  color: #547b96;
  line-height: 160rpx;
  margin-right: 24rpx;
}
</style>
